/// <reference path="../index.d.ts" />

export default {
  props: {
    data: { type: Array, default: () => [] },
    index: { type: Number, default: 2 }
  },
  render(h: any) {
    const filteredData = this.data.filter((it: any) => !it.hidden)
    const prefixButtons = filteredData.slice(0, this.index)
    const suffixButtons = filteredData.slice(this.index)
    const dropdownContent = suffixButtons.map((button: any) => {
      return h('el-dropdown-item', { props: { disabled: button.disabled }, key: button.text }, [
        button.confirm
          ? h('el-popconfirm', { props: { title: button.confirm }, on: { confirm: button.callback } }, [
              h('div', { slot: 'reference', class: 'px-[10px] py-[5px]' }, button.text)
            ])
          : h('div', { class: 'px-[10px] py-[5px]', on: { click: button.callback } }, button.text)
      ])
    })

    const renderButton = (button: any) => {
      if (button.confirm) {
        return h('el-popconfirm', { props: { title: button.confirm }, on: { confirm: button.callback } }, [
          h('el-button', { props: button, class: '!mr-[4px] !ml-0', slot: 'reference' }, button.text)
        ])
      } else {
        return h('el-button', { props: button, class: '!mr-[4px] !ml-0', on: { click: button.callback } }, button.text)
      }
    }

    const prefix = prefixButtons.map((button: any) => renderButton(button))
    const suffix =
      suffixButtons.length > 0
        ? h('el-dropdown', [
            h('el-button', { props: { icon: 'el-icon-arrow-down' }, class: '!border-r !px-[6px] !border-[#DDDFE5]' }),
            h('el-dropdown-menu', { class: '!p-0', slot: 'dropdown' }, dropdownContent)
          ])
        : null

    return h('div', { attrs: this.$attrs, on: this.$listeners }, [prefix, suffix])
  }
}
